<!-- 报表管理 -->
<template>
  <div class="">
    <el-card>
      <el-row style="margin-bottom: 5px">
        <el-col :span="24">
          <el-button type="primary" @click="addReport" size="mini" v-has="'add'"
            >添加报表</el-button
          >
        </el-col>
      </el-row>
      <yg-table :columns="columns" :tableList="TableList" :key="Key">
        <el-table-column slot="action" fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-tooltip content="编辑" placement="top" effect="light">
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="editReport(scope.row)"
                size="mini"
                v-has="'edit'"
              >
              </el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top" effect="light">
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="delectReport(scope.row)"
                size="mini"
                v-has="'del'"
              >
              </el-button>
            </el-tooltip>
            <el-tooltip content="数据配置" placement="top" effect="light">
              <el-button
                type="success"
                icon="el-icon-info"
                circle
                @click="dataConfig(scope.row)"
                size="mini"
                v-has="'datacfg'"
              >
              </el-button>
            </el-tooltip>
            <el-tooltip content="预览" placement="top" effect="light">
              <el-button
                type="warning"
                icon="el-icon-view"
                circle
                @click="Perview(scope.row)"
                size="mini"
                v-has="'view'"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </yg-table>
    </el-card>
    <!-- 添加报表弹窗 -->
    <el-dialog
      title="添加报表"
      :visible.sync="addReportDialogVisible"
      width="50%"
      @close="addReportDialogClose"
      :close-on-click-modal="false"
    >
      <yg-from
        ref="addReportForm"
        :formObj="addReportFromObj"
        :formData="addReportFromData"
      ></yg-from>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="addReportDialogVisible = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="addReportConfirm"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 修改报表信息 -->
    <el-dialog
      title="修改报表"
      :visible.sync="editReportDialogVisible"
      width="50%"
      :close-on-click-modal="false"
    >
      <yg-from
        ref="editReportForm"
        :formObj="editReportFromObj"
        :formData="editReportFromData"
      ></yg-from>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="editReportDialogVisible = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="editReportConfirm"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 读回数据配置信息 -->
    <el-dialog
      title="数据配置"
      :visible.sync="dataConfigDialogVisible"
      width="50%"
      @close="dataConfigReportDialogClose"
      :close-on-click-modal="false"
    >
      <el-row>
        <el-col :span="24">
          <el-button type="primary" @click="addConfig" size="mini"
            >添加</el-button
          >
          <el-button type="primary" @click="addConfigJSON" size="mini"
            >添加JSON</el-button
          >
          <el-button type="primary" @click="editConfigJSON" size="mini"
            >编辑JSON</el-button
          >
        </el-col>
      </el-row>
      <yg-table :columns="dialogColumns" :tableList="dataList">
        <el-table-column slot="actio" fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              @click="editRow(scope.$index, scope.row, dataList)"
              size="mini"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="deleteRow(scope.$index, dataList)"
              size="mini"
            >
            </el-button>
          </template>
        </el-table-column>
      </yg-table>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dataConfigDialogVisible = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="dataConfigOk"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 添加数据配置信息 -->
    <el-dialog
      title="添加数据配置"
      :visible.sync="addDataEchoDialogVisible"
      append-to-body
      width="50%"
      :close-on-click-modal="false"
      @close="addDataEchoDialogClose"
    >
      <el-form
        ref="addDataCongfigForm"
        :model="addDataConfigObj"
        label-width="80px"
        size="mini"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="数据来源" prop="from">
              <el-select
                style="width: 100%"
                v-model="addDataConfigObj.from"
                placeholder="请选择"
                @change="selectChange"
              >
                <el-option label="遥测" value="param-yc"></el-option>
                <el-option label="遥脉" value="param-ym"></el-option>
                <el-option label="定时计算任务" value="param-task"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row> -->
        <!-- <el-col :span="24"> -->
        <el-form-item label="数据">
          <el-table
            class="DataTable"
            ref="multipleTable"
            :data="echoDataList"
            tooltip-effect="dark"
            style="width: 100%"
            max-height="300"
            :select-on-indeterminate="false"
            @select="edithandleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="id" prop="id"> </el-table-column>
            <el-table-column prop="name" label="名称"> </el-table-column>
            <el-table-column prop="unit" label="单位"> </el-table-column>
          </el-table>
        </el-form-item>
        <!-- </el-col> -->
        <!-- </el-row> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="addDataEchoDialogVisible = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="addDataConfigOk"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 添加JSON配置信息 -->
    <el-dialog
      title="添加JSON数据配置"
      :visible.sync="addJsonDialogVisible"
      append-to-body
      width="50%"
      :close-on-click-modal="false"
      @close="addJsonDialogClose"
    >
      <el-input
        type="textarea"
        autosize
        placeholder="请输入内容"
        v-model="addJsonValue"
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="addJsonDialogVisible = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="addJsonConfigOk"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 编辑回显数据配置信息 -->
    <el-dialog
      title="编辑数据配置"
      :visible.sync="editDataEchoDialogVisible"
      append-to-body
      width="50%"
      :close-on-click-modal="false"
    >
      <yg-from
        ref="editDataEcho"
        :formObj="editDataEchoObj"
        :formData="editDataEchoData"
      ></yg-from>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="editDataEchoDialogVisible = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="editDataEchoOk"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 回显编辑JSON配置信息 -->
    <el-dialog
      title="编辑JSON数据配置"
      :visible.sync="editJsonDialogVisible"
      append-to-body
      width="50%"
      :close-on-click-modal="false"
      @close="editJsonDialogClose"
    >
      <el-input
        type="textarea"
        autosize
        placeholder="请输入内容"
        v-model="editJsonValue"
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="editJsonDialogVisible = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="editJsonConfigOk"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 预览数据 -->
    <el-dialog
      title="预览数据"
      :visible.sync="previewDialogVisible"
      width="80%"
      :close-on-click-modal="false"
      @close="previewDataDialogClose"
    >
      <yg-from
        ref="editDataEcho"
        :formObj="previewReportFromObj"
        :formData="previewReportFromData"
      ></yg-from>
      <!-- <el-card> -->
      <el-form
        ref="FtuForm"
        :model="QuerypreviewReportFromData"
        label-position="left"
        label-width="70px"
        size="mini"
      >
        <el-row>
          <el-col :span="5">
            <el-form-item label="查询类型" prop="reqType">
              <el-select
                style="width: 100%"
                v-model="QuerypreviewReportFromData.reqType"
                placeholder="请选择"
                @change="ReportselectChange"
              >
                <el-option label="按返回数量查询" :value="1"></el-option>
                <el-option label="按起始时间查询" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5" v-if="formItemNumShow">
            <el-form-item label="返回数量" prop="count">
              <el-input
                v-model.number="QuerypreviewReportFromData.count"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- </el-row>
          <el-row> -->
          <el-col :span="4" v-if="formItemWeekShow">
            <el-form-item label="周日期" prop="week">
              <el-date-picker
                style="width: 100%"
                v-model="QuerypreviewReportFromData.week"
                type="week"
                format="yyyy 第 WW 周"
                placeholder="选择周"
                clearable
                @change="changeWeek"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4" v-if="formItemDateShow">
            <el-form-item label="开始时间" prop="beginTime">
              <el-date-picker
                style="width: 100%"
                v-model="QuerypreviewReportFromData.beginTime"
                type="datetime"
                placeholder="选择开始日期时间"
                range-separator=":"
                value-format="yyyy-MM-dd HH:mm:ss"
                clearable
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4" v-if="formItemDateShow">
            <el-form-item label="结束时间" prop="endTime">
              <el-date-picker
                style="width: 100%"
                v-model="QuerypreviewReportFromData.endTime"
                type="datetime"
                placeholder="选择结束日期时间"
                range-separator=":"
                value-format="yyyy-MM-dd HH:mm:ss"
                clearable
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button
              size="mini"
              type="success"
              @click="query"
              style="margin-left: 10px"
              >查询</el-button
            >
            <el-button type="primary" size="mini" @click="exportButton"
              >导出</el-button
            >
          </el-col>
        </el-row>
      </el-form>
      <!-- </el-card> -->
      <el-divider>
        {{ changeMessage }}
      </el-divider>
      <!-- <div id="box" style="display: none"> -->
      <el-table
        ref="PrintTable"
        id="myTable"
        v-loading="loadingShow"
        size="mini"
        :data="body"
        max-height="300"
        style="width: 100%; font-size: 12px"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column
          v-for="(item, index) in header"
          :key="index"
          :label="item.label"
          :prop="item.prop"
          :align="item.align"
          :fixed="index == 0"
          resizable
          :render-header="renderheader"
        >
        </el-table-column>
      </el-table>
      <!-- </div> -->

      <div style="margin-top: 10px" v-show="bodylength > 0">
        <b>共 {{ bodylength }} 条</b>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
import { exportExcel } from "../../utils/exportExcelBlob/index";
import YgTable from "@/components/Table/YgTable.vue";
import YgFrom from "@/components/Form/YgFrom.vue";
import {
  setMessageCallback,
  publishMsg,
  removeMessageCallback,
  checkSpecialId,
} from "@/mqtt";
export default {
  name: "ParamReport",
  components: {
    YgTable,
    YgFrom,
  },
  data() {
    //这里存放数据
    return {
      addReportDialogVisible: false, //添加报表弹窗显隐
      editReportDialogVisible: false, //修改报表信息
      dataConfigDialogVisible: false, //数据配置弹窗
      editDataEchoDialogVisible: false, //编剧数据回显
      addDataEchoDialogVisible: false, //添加数据配置回显
      addJsonDialogVisible: false, //添加JSON数据配置
      editJsonDialogVisible: false, //编辑JSON数据配置
      previewDialogVisible: false, //预览数据
      loadingShow: false, //加载表格数据
      columns: [
        {
          prop: "id",
          label: "数据id",
          align: "left",
        },
        {
          prop: "name",
          label: "名称",
          align: "left",
        },
        {
          prop: "desc",
          label: "描述",
        },
        {
          prop: "reportType",
          label: "报表类型",
          formatter(row) {
            if (row.hasOwnProperty("reportType")) {
              if (row.reportType == "0") {
                return "分钟报表";
              }
              if (row.reportType == "1") {
                return "时报表";
              }
              if (row.reportType == "2") {
                return "日报表";
              }
              if (row.reportType == "3") {
                return "周报表";
              }
              if (row.reportType == "4") {
                return "月报表";
              }
              if (row.reportType == "5") {
                return "季报表";
              }
              if (row.reportType == "6") {
                return "年报表";
              }
            } else {
              return "";
            }
          },
        },
        {
          prop: "update_time",
          label: "最后保存时间",
        },
        { slot: "action" },
      ],
      dialogColumns: [
        {
          index: true,
        },
        {
          prop: "from",
          label: "数据来源",
        },
        {
          prop: "id",
          label: "数据id",
          minWidth: 150,
        },
        {
          prop: "name",
          label: "名称",
        },
        {
          prop: "unit",
          label: "单位",
        },
        { slot: "actio" },
      ],
      TableList: [],
      addReportFromObj: [
        {
          input: true, //是input
          label: "数据ID", //字段
          prop: "id", //字段名
          width: 12, //参考el-col
          placeholder: "请输入数据ID",
          disabled: false, //是否禁用
          labelWidth: "80px",
          rules: [
            {
              required: true,
              message: "请输入数据ID",
            },
          ],
        },
        {
          input: true, //是input
          label: "名称", //字段
          prop: "name", //字段名
          width: 12, //参考el-col
          placeholder: "请输入名称",
          disabled: false, //是否禁用
          labelWidth: "80px",
        },
        {
          input: true, //是input
          label: "描述", //字段
          prop: "desc", //字段名
          width: 12, //参考el-col
          placeholder: "请输入描述",
          disabled: false, //是否禁用
          labelWidth: "80px",
        },
        {
          select: true, //是input
          label: "报表类型", //字段
          prop: "reportType", //字段名
          width: 12, //参考el-col
          placeholder: "请输入报表类型",
          disabled: false, //是否禁用
          labelWidth: "80px",
          options: [
            { label: "分钟报表", value: 0 },
            { label: "小时报表", value: 1 },
            { label: "日报表", value: 2 },
            { label: "周报表", value: 3 },
            { label: "月报表", value: 4 },
            { label: "年报表", value: 6 },
          ],
          rules: [
            {
              required: true,
              message: "请输入报表类型",
            },
          ],
        },
        {
          select: true, //是input
          label: "展示类型", //字段
          prop: "returnType", //字段名
          width: 12, //参考el-col
          placeholder: "请输入报表展示类型",
          disabled: false, //是否禁用
          labelWidth: "80px",
          options: [
            { label: "表头是数据项，表数据按时间顺序组织", value: 0 },
            { label: "表头是时间，表数据按数据项组织", value: 1 },
          ],
          rules: [
            {
              required: true,
              message: "请输入报表展示类型",
            },
          ],
        },
      ],
      addReportFromData: {
        id: "",
        name: "",
        desc: "",
        reportType: "",
        returnType: "",
      },
      editReportFromObj: [
        {
          input: true, //是input
          label: "数据ID", //字段
          prop: "id", //字段名
          width: 12, //参考el-col
          placeholder: "请输入数据ID",
          disabled: true, //是否禁用
          labelWidth: "80px",
        },
        {
          input: true, //是input
          label: "名称", //字段
          prop: "name", //字段名
          width: 12, //参考el-col
          placeholder: "请输入名称",
          disabled: false, //是否禁用
          labelWidth: "80px",
        },
        {
          input: true, //是input
          label: "描述", //字段
          prop: "desc", //字段名
          width: 12, //参考el-col
          placeholder: "请输入描述",
          disabled: false, //是否禁用
          labelWidth: "80px",
          rules: [
            {
              required: true,
              message: "请输入描述",
            },
          ],
        },
        {
          select: true, //是input
          label: "报表类型", //字段
          prop: "reportType", //字段名
          width: 12, //参考el-col
          placeholder: "请输入报表类型",
          disabled: false, //是否禁用
          labelWidth: "80px",
          options: [
            { label: "分钟报表", value: 0 },
            { label: "小时报表", value: 1 },
            { label: "日报表", value: 2 },
            { label: "周报表", value: 3 },
            { label: "月报表", value: 4 },
            { label: "年报表", value: 6 },
          ],
          rules: [
            {
              required: true,
              message: "请输入报表类型",
            },
          ],
        },
        {
          select: true, //是input
          label: "展示类型", //字段
          prop: "returnType", //字段名
          width: 12, //参考el-col
          placeholder: "请输入报表展示类型",
          disabled: false, //是否禁用
          labelWidth: "80px",
          options: [
            { label: "表头是数据项，表数据按时间顺序组织", value: 0 },
            { label: "表头是时间，表数据按数据项组织", value: 1 },
          ],
          rules: [
            {
              required: true,
              message: "请输入报表展示类型",
            },
          ],
        },
      ],
      editReportFromData: {
        id: "",
        name: "",
        desc: "",
        reportType: "",
        returnType: "",
      },
      editDataEchoObj: [
        {
          select: true, //是input
          label: "数据来源", //字段
          prop: "from", //字段名
          width: 12, //参考el-col
          placeholder: "请输入数据来源",
          disabled: true, //是否禁用
          labelWidth: "80px",
          options: [
            { label: "遥测", value: "param-yc" },
            { label: "遥脉", value: "param-ym" },
            { label: "定时计算任务", value: "param-task" },
          ],
        },
        {
          input: true, //是input
          label: "数据ID", //字段
          prop: "id", //字段名
          width: 12, //参考el-col
          placeholder: "请输入数据ID",
          disabled: true, //是否禁用
          labelWidth: "80px",
        },
        {
          input: true, //是input
          label: "名称", //字段
          prop: "name", //字段名
          width: 12, //参考el-col
          placeholder: "请输入名称",
          disabled: false, //是否禁用
          labelWidth: "80px",
        },
        {
          input: true, //是input
          label: "单位", //字段
          prop: "unit", //字段名
          width: 12, //参考el-col
          placeholder: "请输入描述",
          disabled: false, //是否禁用
          labelWidth: "80px",
        },
      ],
      editDataEchoData: {
        id: "",
        name: "",
        from: "",
        unit: "",
      },
      addDataConfigObj: {
        from: "",
        id: "",
        name: "",
        unit: "",
      },
      previewReportFromObj: [
        {
          input: true, //是input
          label: "数据ID", //字段
          prop: "id", //字段名
          width: 12, //参考el-col
          placeholder: "请输入数据ID",
          disabled: true, //是否禁用
          labelWidth: "80px",
        },
        {
          input: true, //是input
          label: "名称", //字段
          prop: "name", //字段名
          width: 12, //参考el-col
          placeholder: "请输入名称",
          disabled: true, //是否禁用
          labelWidth: "80px",
        },
        {
          input: true, //是input
          label: "描述", //字段
          prop: "desc", //字段名
          width: 12, //参考el-col
          placeholder: "请输入描述",
          disabled: true, //是否禁用
          labelWidth: "80px",
        },
        {
          select: true, //是input
          label: "报表类型", //字段
          prop: "reportType", //字段名
          width: 12, //参考el-col
          placeholder: "请输入报表类型",
          disabled: true, //是否禁用
          labelWidth: "80px",
          options: [
            { label: "分钟报表", value: 0 },
            { label: "小时报表", value: 1 },
            { label: "日报表", value: 2 },
            { label: "周报表", value: 3 },
            { label: "月报表", value: 4 },
            { label: "年报表", value: 6 },
          ],
        },
        {
          select: true, //是input
          label: "展示类型", //字段
          prop: "returnType", //字段名
          width: 12, //参考el-col
          placeholder: "请输入报表展示类型",
          disabled: true, //是否禁用
          labelWidth: "80px",
          options: [
            { label: "表头是数据项，表数据按时间顺序组织", value: 0 },
            { label: "表头是时间，表数据按数据项组织", value: 1 },
          ],
        },
      ],
      previewReportFromData: {
        id: "",
        name: "",
        desc: "",
        reportType: "",
        returnType: "",
      },
      QuerypreviewReportFromData: {
        reqType: 1,
        count: 1,
        beginTime: "",
        endTime: "",
        week: "",
      },
      formItemNumShow: true,
      formItemDateShow: false,
      formItemWeekShow: false,
      dataList: [],
      echoDataList: [],
      ycList: [],
      ymList: [],
      taskList: [],
      dataIndex: "",
      id: "",
      header: [],
      body: [],
      bodylength: 0,
      Key: 0,
      addJsonValue: "",
      editJsonValue: "",
      selectedWeek: "", // 绑定的值，表示选择的周范围
    };
  },
  //监听属性 类似于data概念
  computed: {
    changeMessage: function () {
      switch (this.previewReportFromData.reportType) {
        case 0:
          return "分钟报表";
        case 1:
          return "时报表";
        case 2:
          return "日报表";
        case 3:
          return "周报表";
        case 4:
          return "月报表";
        case 6:
          return "年报表";
        default:
          return "";
      }
    },
    formattedStartOfWeek() {
      if (this.QuerypreviewReportFromData.week) {
        const startDate = moment(this.QuerypreviewReportFromData.week)
          .startOf("week")
          .format("YYYY-MM-DD HH:mm:ss");
        return startDate;
      }
      return "";
    },
    formattedEndOfWeek() {
      if (this.QuerypreviewReportFromData.week) {
        const endDate = moment(this.QuerypreviewReportFromData.week)
          .endOf("week")
          .format("YYYY-MM-DD HH:mm:ss");
        return endDate;
      }
      return "";
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    initTableKey() {
      this.Key = 1000 + Math.trunc(Math.random() * 1000);
    },
    renderheader(h, { column, $index }) {
      return h("div", {}, [
        h("div", {}, column.label.split(",")[0]),
        h("div", {}, column.label.split(",")[1]),
      ]);
    },
    addReport() {
      this.addReportDialogVisible = true;
    },
    editReport(val) {
      this.editReportDialogVisible = true;
      this.editReportFromData.id = val.id;
      this.editReportFromData.name = val.name;
      this.editReportFromData.desc = val.desc;
      this.editReportFromData.reportType = Number(val.reportType);
      this.editReportFromData.returnType = Number(val.returnType);
    },
    //编辑数据配置里面的表格
    editRow(val, row, data) {
      this.editDataEchoDialogVisible = true;
      this.dataIndex = val;
      this.editDataEchoData.from = row.from;
      this.editDataEchoData.id = row.id;
      this.editDataEchoData.name = row.name;
      this.editDataEchoData.unit = row.unit;
    },
    //删除数据配置
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    delectReport(id) {
      this.$confirm(
        `将要删除id为:${id.id} 名称为:${id.name} 的报表吗？是否确定删除?`,
        "删除报表",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          let newMsg = {
            webMsgType: 1017,
            funCode: 2,
          };
          newMsg.data = { id: id.id };
          publishMsg(newMsg);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    Perview(val) {
      this.previewDialogVisible = true;
      this.previewReportFromData.id = val.id;
      this.previewReportFromData.name = val.name;
      this.previewReportFromData.desc = val.desc;
      this.previewReportFromData.reportType = Number(val.reportType);
      this.previewReportFromData.returnType = Number(val.returnType);
    },
    addConfigJSON() {
      this.addJsonDialogVisible = true;
    },
    editConfigJSON() {
      this.editJsonDialogVisible = true;
    },
    query() {
      let newMsg = {
        webMsgType: 1017,
        funCode: 6,
      };
      newMsg.data = {
        id: this.previewReportFromData.id,
        ...this.QuerypreviewReportFromData,
      };
      publishMsg(newMsg);
      this.loadingShow = true;
    },
    exportButton() {
      if (this.bodylength == 0) {
        this.$message.warning("请查询数据后再导出！");
      } else {
        exportExcel(
          document.getElementById("myTable"),
          `${this.changeMessage}.xlsx`
        );
      }
    },
    printJson() {
      this.$print(this.$refs.PrintTable);
      this.initTableKey();
    },
    ReportselectChange(val) {
      if (this.previewReportFromData.reportType == 3) {
        if (val == 1) {
          this.formItemWeekShow = false;
          this.formItemNumShow = true;
        } else {
          this.formItemWeekShow = true;
          this.formItemNumShow = false;
        }
      } else {
        val == "1"
          ? (this.formItemNumShow = true)
          : (this.formItemNumShow = false);
        val == "2"
          ? (this.formItemDateShow = true)
          : (this.formItemDateShow = false);
      }
    },
    previewDataDialogClose() {
      this.header = [];
      this.body = [];
      this.bodylength = 0;
      this.QuerypreviewReportFromData.count = 1;
      this.QuerypreviewReportFromData.beginTime = "";
      this.QuerypreviewReportFromData.endTime = "";
      this.QuerypreviewReportFromData.reqType = 1;
      this.formItemDateShow = false;
      this.formItemWeekShow = false;
      this.formItemNumShow = true;
    },
    changeWeek() {
      this.QuerypreviewReportFromData.beginTime = this.formattedStartOfWeek;
      this.QuerypreviewReportFromData.endTime = this.formattedEndOfWeek;
    },
    editReportConfirm() {
      if (this.$refs.editReportForm.submitForm()) {
        let newMsg = {
          webMsgType: 1017,
          funCode: 3,
        };
        newMsg.data = this.editReportFromData;
        publishMsg(newMsg);
        this.editReportDialogVisible = false;
      }
    },
    addReportConfirm() {
      if (this.$refs.addReportForm.submitForm()) {
        let newMsg = {
          webMsgType: 1017,
          funCode: 1,
        };
        newMsg.data = this.addReportFromData;
        publishMsg(newMsg);
        this.addReportDialogVisible = false;
      }
    },
    addReportDialogClose() {
      this.$refs.addReportForm.resetForm();
    },
    dataConfigOk() {
      let newMsg = {
        webMsgType: 1017,
        funCode: 5,
      };
      newMsg.data = { id: this.id, data: this.dataList };
      publishMsg(newMsg);
      this.dataConfigDialogVisible = false;
    },
    addJsonConfigOk() {
      this.dataList = JSON.parse(this.addJsonValue);
      this.addJsonDialogVisible = false;
    },
    editJsonConfigOk() {
      this.editJsonDialogVisible = false;
    },
    dataConfig(val) {
      this.id = val.id;
      this.dataConfigDialogVisible = true;
      let newMsg = {
        webMsgType: 1017,
        funCode: 4,
      };
      newMsg.data = { id: val.id };
      publishMsg(newMsg);
    },
    dataConfigReportDialogClose() {},
    addDataEchoDialogClose() {
      this.$refs.addDataCongfigForm.resetFields();
    },
    addJsonDialogClose() {
      this.addJsonValue = "";
    },
    editJsonDialogClose() {},
    addConfig() {
      this.addDataEchoDialogVisible = true;
    },
    //当 编辑数据配置的 多选表格 被选中时
    edithandleSelectionChange(selection, row) {
      if (selection.length > 1) {
        const del_row = selection.shift();
        this.$refs.multipleTable.toggleRowSelection(del_row, false);
      }
      this.addDataConfigObj.id = row.id;
      this.addDataConfigObj.name = row.name;
      this.addDataConfigObj.unit = row.unit;
    },
    selectChange(val) {
      if (val == "param-yc") {
        this.echoDataList = [];
        this.echoDataList = this.ycList;
      }
      if (val == "param-ym") {
        this.echoDataList = [];
        this.echoDataList = this.ymList;
      }
      if (val == "param-task") {
        this.echoDataList = [];
        this.echoDataList = this.taskList;
      }
      if (val == "") {
        this.echoDataList = [];
      }
    },
    //编辑回显数据 确认按钮
    editDataEchoOk() {
      let selectedlist = JSON.parse(JSON.stringify(this.editDataEchoData));
      this.$set(this.dataList, this.dataIndex, selectedlist);
      this.editDataEchoDialogVisible = false;
    },
    //添加回显数据 确认按钮
    addDataConfigOk() {
      let selectedlist = JSON.parse(JSON.stringify(this.addDataConfigObj));
      this.dataList.push(selectedlist);
      this.addDataEchoDialogVisible = false;
      this.echoDataList = [];
    },
    onMessage(topic, msg) {
      switch (msg.webMsgType) {
        case 1017:
          switch (msg.funCode) {
            case 0:
              if (msg.retCode != 0 || !msg.data) {
                return this.$message.error(msg.retMsg);
              }
              this.TableList = msg.data;
              break;
            case 1:
              if (checkSpecialId(msg)) {
                if (msg.retCode != 0) {
                  this.$message.error(msg.retMsg);
                } else {
                  this.$message.success("添加报表成功!");
                }
              }
              break;
            case 2:
              if (checkSpecialId(msg)) {
                if (msg.retCode != 0) {
                  return this.$message.error(msg.retMsg);
                } else {
                  this.$message.success("删除报表成功!");
                }
              }
              break;
            case 3:
              if (checkSpecialId(msg)) {
                if (msg.retCode != 0) {
                  this.$message.error(msg.retMsg);
                } else {
                  this.$message.success("更新报表信息成功");
                }
              }
              break;
            case 4:
              if (checkSpecialId(msg)) {
                if (msg.retCode != 0 || !msg.data) {
                  this.$message.error(msg.retMsg);
                } else {
                  if (msg.data.data) {
                    this.dataList = msg.data.data;
                    this.editJsonValue = JSON.stringify(msg.data.data);
                  } else {
                    this.dataList = [];
                  }
                }
              }
              break;
            case 5:
              if (checkSpecialId(msg)) {
                if (msg.retCode != 0) {
                  this.$message.error(msg.retMsg);
                } else {
                  this.$message.success("保存成功");
                }
              }
              break;
            case 6:
              if (checkSpecialId(msg)) {
                if (msg.retCode != 0 || !msg.data) {
                  this.$message.error(msg.retMsg);
                } else if (
                  msg.hasOwnProperty("returnType") &&
                  msg.returnType == 1
                ) {
                  if (msg.data.reportType == 0) {
                    for (var i = 1; i < msg.data.columns.length; i++) {
                      var dateTime = msg.data.columns[i].label;
                      var datePart = dateTime.split(" ")[0]; // 提取日期部分
                      var timePart = dateTime.split(" ")[1]; // 提取时间部分
                      var seconds = timePart.split(":")[2]; // 提取秒部分
                      msg.data.columns[i].label = seconds + "秒";
                    }
                  } else if (msg.data.reportType == 1) {
                    for (var i = 1; i < msg.data.columns.length; i++) {
                      var dateTime = msg.data.columns[i].label;
                      var time = dateTime.split(" ")[1].substring(0, 5);
                      msg.data.columns[i].label = time + "分";
                    }
                  } else if (msg.data.reportType == 2) {
                    for (var i = 1; i < msg.data.columns.length; i++) {
                      var dateTime = msg.data.columns[i].label;
                      var hour = dateTime.split(" ")[1].substring(0, 5);
                      msg.data.columns[i].label = hour;
                    }
                  } else if (msg.data.reportType == 3) {
                    for (var i = 1; i < msg.data.columns.length; i++) {
                      var dateTime = msg.data.columns[i].label;
                      var week = dateTime.split("-")[2].split(" ")[0];
                      msg.data.columns[i].label = week + "日";
                    }
                  } else if (msg.data.reportType == 4) {
                    for (var i = 1; i < msg.data.columns.length; i++) {
                      var dateTime = msg.data.columns[i].label;
                      var day = dateTime.split("-")[2].split(" ")[0];
                      msg.data.columns[i].label = day + "日";
                    }
                  } else if (msg.data.reportType == 6) {
                    for (var i = 1; i < msg.data.columns.length; i++) {
                      var dateTime = msg.data.columns[i].label;
                      var month = dateTime.split("-")[1];
                      msg.data.columns[i].label = month + "月";
                    }
                  }
                  this.header = msg.data.columns;
                  this.body = msg.data.data;
                } else if (
                  msg.data.hasOwnProperty("data") &&
                  msg.data.hasOwnProperty("columns")
                ) {
                  this.header = msg.data.columns;
                  this.body = msg.data.data;
                  this.bodylength = msg.data.data.length;
                }
                this.loadingShow = false;
              }
              break;
            default:
              break;
          }
          break;
        case 1015:
          switch (msg.funCode) {
            case 0:
              if (msg.retCode != 0 || !msg.data) {
                return this.$message.error(msg.retMsg);
              }
              let res = msg.data;
              res.map((e) => {
                return this.taskList.push({
                  name: e.name,
                  id: e.id,
                  unit: e.unit,
                });
              });
              break;
          }
          break;
        case 1010:
          switch (msg.funCode) {
            case 0:
              if (msg.retCode != 0 || !msg.data) {
                return this.$message.error(msg.retMsg);
              }
              let res = msg.data;
              res.map((e) => {
                return this.ycList.push({
                  name: e.name,
                  id: e.id,
                  unit: e.unit,
                });
              });
              break;
          }
          break;
        case 1011:
          switch (msg.funCode) {
            case 0:
              if (msg.retCode != 0 || !msg.data) {
                return this.$message.error(msg.retMsg);
              }
              let res = msg.data;
              res.map((e) => {
                return this.ymList.push({
                  name: e.name,
                  id: e.id,
                  unit: e.unit,
                });
              });
              break;
          }
          break;
        default:
          break;
      }
    },
    // 按钮点击
    buttonClick(index, prop) {
      if (index == "resetButton") {
        this.$refs.publicForm.resetForm();
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    setMessageCallback(this.onMessage);
    publishMsg({
      webMsgType: 1017,
      funCode: 0,
    });
    publishMsg({
      webMsgType: 1015,
      funCode: 0,
    });
    publishMsg({
      webMsgType: 1010,
      funCode: 0,
    });
    publishMsg({
      webMsgType: 1011,
      funCode: 0,
    });
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  destroyed() {
    removeMessageCallback(this.onMessage);
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-card__body {
  padding: 5px 5px 5px 5px;
}
::v-deep .el-table__fixed-right {
  height: 100% !important;
}
::v-deep
  .DataTable
  .el-table__header-wrapper
  .el-table__header
  .has-gutter
  .el-checkbox {
  display: none;
}
</style>
